<template>
	<div class="scan-page">
		<!-- 顶部栏 -->
		<!-- <header class="top-bar">
			<img src="./assets/icon_back.png" @click="goBack" style="width: 48px; height: auto;">
			<h1 class="title">血压计</h1>
			<div class="right-placeholder"></div>
		</header> -->

		<!-- 中间内容 -->
		<main class="content">
			<div v-if="!scanning" class="device-box">
				<div class="device-placeholder">
					<img src="../../../static/assets/ic_binding_qr.png" alt="设备示意图" style="width: 400px; height: auto;">
				</div>
				<!-- <p class="tip-text">扫描机身imei</p> -->
			</div>


			<div class="reader-box" v-else>
				
				<!-- <view class="reader" id="reader"></view> -->
				<BarcodeScanner ref="barcodeScanner" @scan-result="handleScanResult" />
				<button class="scan-btn2" @click="closesscan">关闭扫描</button>
			</div>

			<!-- 扫码结果 -->
			<p v-if="scanResult" class="result-text">扫码结果：{{ scanResult }}</p>
		</main>

		<!-- 底部按钮 -->
		<footer class="footer" v-if="!scanning">
			<button class="scan-btn" @click="scanQrCode">扫描imei</button>

			<button class="input-btn" @click="openDialog">输入imei号</button>
		</footer>

		<div>
			<!-- 遮罩层，点击可关闭弹窗（可选逻辑，这里简单实现） -->
			<div class="mask" v-show="isShowDialog" @click="closeDialog"></div>
			<!-- 弹窗主体 -->
			<div class="dialog-container" v-show="isShowDialog">
				<div class="dialog-header">
					<span class="dialog-title">设备imei码</span>
					<span class="close-btn" @click="closeDialog">×</span>
				</div>
				<div class="dialog-content">
					<!-- <p>请区分大小写输入9位设备码</p> -->
					<input v-model="snCode" class="sn-input" placeholder="请输入imei号" />
				</div>
				<div class="dialog-footer">
					<button class="confirm-btn" @click="submit">确定</button>
				</div>
			</div>
		</div>


	</div>

</template>

<script>
import { Html5Qrcode } from "html5-qrcode"
import { bindClient } from '@/api/index'
import { Dialog, Toast } from 'vant';
import BarcodeScanner from "@/components/BarcodeScanner.vue";
export default {
	name: "ScanPage",
	components: { BarcodeScanner },

	data() {
		return {
			scanning: false,
			scanResult: "",
			isShowDialog: false, // 控制弹窗显示隐藏
			snCode: '', // 绑定输入框的SN码数据
			randomVal: '',
			html5Qrcode: null,
		}
	},

	mounted() {
		// 获取url参数
		// this.randomVal = this.$route.query.random; 


		this.randomVal = this.getQueryParam("random");
		console.log("random:", this.randomVal);
	},

	methods: {
      closesscan() {
          this.scanning = false;
          this.$refs.barcodeScanner.stop();
      },
		goBack() {
			this.$router.back()
		},
		// 处理扫码结果
		handleScanResult(result) {
			console.log('收到扫码结果:', result);
			this.scanResult = result;
			// 这里可以添加扫码成功后的逻辑，比如绑定设备
			this.snCode = result;
			// this.bindClient();
			// 如果需要停止扫描，可以添加以下代码
			this.scanning = false;
			this.openDialog();
		},
		getQueryParam(key) {
			const search = window.location.search;
			const params = new URLSearchParams(search);
			return params.get(key);
		},
		scanQrCode() {
			this.scanResult = "";
			this.scanning = true;

			// uni.scanCode({
			// 	onlyFromCamera: true, // 只允许从相机扫码
			// 	scanType: ['qrCode', 'barCode'], // 支持二维码、条形码
			// 	success: (res) => {
			// 		console.log("扫码成功:", res);
			// 		this.scanResult = res.result; // 二维码/条码中的内容
			// 		this.scanning = false;
			// 	},
			// 	fail: (err) => {
			// 		console.error("扫码失败:", err);
			// 		uni.showToast({
			// 			title: "扫码失败",
			// 			icon: "none"
			// 		});
			// 		this.scanning = false;
			// 	}
			// });
			// 只在 H5 环境下执行
			// #ifdef H5
			// Html5Qrcode.getCameras().then((devices) => {
			// 	if (devices && devices.length) {
			// 		this.html5Qrcode = new Html5Qrcode('reader');
			// 		this.html5Qrcode.start(
			// 			{
			// 				facingMode: 'environment'
			// 			},
			// 			{
			// 				focusMode: 'continuous', //设置连续聚焦模式
			// 				fps: 5,       //设置扫码识别速度
			// 				qrbox: 280   //设置二维码扫描框大小
			// 			},
			// 			(decodeText, decodeResult) => {
			// 				if (decodeText) {	//这里decodeText就是通过扫描二维码得到的内容
			// 					this.action(decodeText)  //对二维码逻辑处理
			// 					this.stopScan(); //关闭扫码功能
			// 				}
			// 			},
			// 			(err) => {
			// 				// console.log(err);  //错误信息
			// 			}
			// 		);
			// 	}
			// });
		},
		stopScan() {
			QRScanner.hide()
			QRScanner.destroy()
			this.scanning = false
		},
		cancelScan() {
			this.stopScan()
		},
		openDialog() {
			this.isShowDialog = true;
		},
		closeDialog() {
			this.isShowDialog = false;
			this.snCode = ''; // 关闭弹窗时清空输入内容，可选操作
		},
		submit() {
			if (this.snCode.length === 0) {
				alert("请输入imei号");
				return;
			} else {
				this.bindClient()
			}
			this.isShowDialog = false;
		},

		async bindClient() {
			// 显示加载提示
			let res = await bindClient({
				"deviceId": this.snCode,
				"random": this.randomVal,
			})
			console.log(res)
			if (res.code === 200) {
				Toast({
					message: '绑定成功',
					duration: 2000
				})
			} else {
				Toast({
					message: '绑定失败',
					duration: 2000
				})
			}
		}

	},
	beforeDestroy() {
		if (this.scanning) {
			this.stopScan()
		}
	}
}
</script>

<style scoped>
.scan-page {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background: #fff;
}

.top-bar {
	display: flex;
	align-items: center;
	height: 48px;
	padding: 0 12px;
	border-bottom: 1px solid #eee;
}

.back-btn {
	background: none;
	border: none;
	font-size: 20px;
	color: #666;
}

.title {
	flex: 1;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
}

.right-placeholder {
	width: 24px;
}

.reader-box {
	position: relative;
	width: 100%;
	height: 100%;
}

.content {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.device-box {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.device-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}

.device-placeholder img {
	width: 70%;
	opacity: 0.4;
}

.scanning-box {
	width: 400px;
	height: 400px;
	border: 1px solid #ccc;
}

.qr-icon {
	position: absolute;
	bottom: -30px;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #32C28B;
	display: flex;
	align-items: center;
	justify-content: center;
}

.qr-icon img {
	width: 48px;
	height: 48px;
}

.tip-text {
	margin-top: 60px;
	color: #666;
	font-size: 14px;
}

.footer {
	padding: 24px;
	margin-bottom: 70px;
}

.scan-btn {
	width: 100%;
	height: 44px;
	background: #32C28B;
	color: #fff;
	border: none;
	border-radius: 22px;
	font-size: 16px;
	font-weight: 500;
}
.scan-btn2 {
	width: 88%;
	height: 44px;
	background: #32C28B;
	color: #fff;
	border: none;
	margin: 20px;
	border-radius: 22px;
	font-size: 16px;
	font-weight: 500;
}

.sn-link {
	margin-top: 12px;
	text-align: center;
	color: #32C28B;
	font-size: 14px;
	cursor: pointer;
}

.result-text {
	margin-top: 20px;
	color: #32C28B;
}

.cancel-btn {
	margin-top: 20px;
	padding: 8px 16px;
	background: #ccc;
	border: none;
	border-radius: 8px;
}


/* 遮罩层样式 */
.mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 999;
}

/* 弹窗容器样式 */
.dialog-container {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	max-width: 300px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	z-index: 1000;
}

/* 弹窗头部样式 */
.dialog-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;

}

.dialog-title {
	font-size: 20px;
	font-weight: bold;
}

.close-btn {
	font-size: 20px;
	cursor: pointer;
	color: #999;
}

/* 弹窗内容样式 */
.dialog-content {
	padding: 16px;
}

.dialog-content p {
	margin-bottom: 12px;
	color: #666;
}

.sn-input {
	width: 100%;
	height: 40px;
	padding: 4px;
	font-size: 16px;
	border: 1px solid #fff7f9fa;
	border-radius: 4px;
	outline: none;
	/* 添加背景色，这里用浅灰色示例，你可替换成想要的颜色值，比如#fff是白色等 */
	background-color: #fff7f9fa;
}

.sn-input::placeholder {
	/* 设置 placeholder 颜色（可自定义色值） */
	color: #999;
	/* 浅灰色，常用默认色 */
	/* 可选：补充其他样式（如字体大小、透明度） */
	font-size: 14px;
	opacity: 1;
	/* 部分浏览器默认有透明度，设为1可完全显示颜色 */
}

/* 弹窗底部样式 */
.dialog-footer {
	padding: 12px 16px;
	text-align: right;
}

.confirm-btn {
	background-color: #42b983;
	padding: 5px 10px 5px 10px;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

.confirm-btn:hover {
	background-color: #359f72;
}

/* 打开弹窗按钮样式（仅为示例，实际可根据页面布局调整） */
.open-dialog-btn {
	margin-top: 20px;
	padding: 10px 20px;
	background-color: #009688;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}
</style>
